Skip to content

Conversation

DrJKL
Copy link
Contributor

@DrJKL DrJKL commented Oct 3, 2025

Summary

Replace color/dark-color pairs in components with design tokens to allow for easy overriding.

Changes

  • What: Token based colors, for now, mostly.
  • Breaking: Got approval from Design to collapse some very similar pairs of colors that seem to have diverged in implementations over time. Some of the colors might be a little different, but we can tweak them later.

Review Focus

Still have quite a few places from which to remove dark-theme, but this at least gets the theming much closer.
Need to decide if I want to keep going in here or cut this and do the rest in a subsequent PR.

Screenshots (if applicable)

┆Issue is synchronized with this Notion page by Unito

Copy link

github-actions bot commented Oct 3, 2025

🎨 Storybook Build Status

Build completed successfully!

⏰ Completed at: 10/06/2025, 09:59:51 PM UTC

🔗 Links


🎉 Your Storybook is ready for review!

Copy link

github-actions bot commented Oct 3, 2025

🎭 Playwright Test Results

⚠️ Tests passed with flaky tests

⏰ Completed at: 10/06/2025, 11:26:54 PM UTC

📈 Summary

  • Total Tests: 487
  • Passed: 455 ✅
  • Failed: 0
  • Flaky: 2 ⚠️
  • Skipped: 30 ⏭️

📊 Test Reports by Browser

  • chromium: View Report • ✅ 448 / ❌ 0 / ⚠️ 2 / ⏭️ 30
  • chromium-2x: Deployment failed
  • chromium-0.5x: View Report • ✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0
  • mobile-chrome: View Report • ✅ 6 / ❌ 0 / ⚠️ 0 / ⏭️ 0

🎉 Click on the links above to view detailed test results for each browser configuration.

@DrJKL DrJKL changed the title WIP: Make components themeable Style: Make components themeable Oct 4, 2025
@DrJKL DrJKL marked this pull request as ready for review October 4, 2025 03:48
@dosubot dosubot bot added the size:L This PR changes 100-499 lines, ignoring generated files. label Oct 4, 2025
Myestery
Myestery previously approved these changes Oct 4, 2025
Copy link
Collaborator

@Myestery Myestery left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@christian-byrne christian-byrne added the claude-review Add to trigger a PR code review from Claude Code label Oct 4, 2025
@DrJKL DrJKL added the New Browser Test Expectations New browser test screenshot should be set by github action label Oct 5, 2025
@DrJKL DrJKL added New Browser Test Expectations New browser test screenshot should be set by github action and removed New Browser Test Expectations New browser test screenshot should be set by github action labels Oct 5, 2025
arjansingh
arjansingh previously approved these changes Oct 5, 2025
## Icon Usage in Storybook

In this project, the `<i-lucide:... />` syntax from unplugin-icons is not supported in Storybook.
In this project, the `<i class="icon-[lucide--folder]" />` syntax from unplugin-icons is not supported in Storybook.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

non-blocker: This should go in the root CLAUDE.md as well. Will prevent many bad generations.

@DrJKL DrJKL added New Browser Test Expectations New browser test screenshot should be set by github action and removed New Browser Test Expectations New browser test screenshot should be set by github action labels Oct 5, 2025
@DrJKL DrJKL added New Browser Test Expectations New browser test screenshot should be set by github action and removed New Browser Test Expectations New browser test screenshot should be set by github action labels Oct 5, 2025
@dosubot dosubot bot removed the size:L This PR changes 100-499 lines, ignoring generated files. label Oct 5, 2025
@DrJKL DrJKL added New Browser Test Expectations New browser test screenshot should be set by github action and removed New Browser Test Expectations New browser test screenshot should be set by github action labels Oct 6, 2025
@DrJKL
Copy link
Contributor Author

DrJKL commented Oct 6, 2025

Added some comments on the screenshots themselves - if all of this is intended, disregard~

Looking at them now. It looks like there are changes due to a default scaling being applied to the SVG icons but not the CSS ones. Good catch 🙂

@webfiltered, I removed the icon stuff from this PR, I'll do it as a standalone.

@DrJKL DrJKL merged commit e7745eb into main Oct 6, 2025
52 of 56 checks passed
@DrJKL DrJKL deleted the drjkl/leitmotif branch October 6, 2025 23:27
@webfiltered
Copy link
Contributor

@webfiltered, I removed the icon stuff from this PR, I'll do it as a standalone.

Awesome! It also made it smaller and easier to peruse and LGTM. 😃

arjansingh pushed a commit that referenced this pull request Oct 7, 2025
Replace color/dark-color pairs in components with design tokens to allow
for easy overriding.
<!-- Also standardizes the icon pattern to simplify the tailwind config.
-->

- **What**: Token based colors, for now, mostly.
- **Breaking**: Got approval from Design to collapse some very similar
pairs of colors that seem to have diverged in implementations over time.
Some of the colors might be a little different, but we can tweak them
later.

Still have quite a few places from which to remove `dark-theme`, but
this at least gets the theming much closer.
Need to decide if I want to keep going in here or cut this and do the
rest in a subsequent PR.

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5908-WIP-Make-components-themeable-2816d73d365081ffbc05d189fe71084b)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

claude-review Add to trigger a PR code review from Claude Code New Browser Test Expectations New browser test screenshot should be set by github action size:L This PR changes 100-499 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants